<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org">
<div th:include="include :: header"></div>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
	<div class="container-fluid">
 		<div class="row">
			<div class="col-lg-12">
				<div class="box ui-draggable ui-droppable">
				<div class="box-header">
					<div class="box-name">
						<i class="fa fa-coffee"></i> <span>历史流程</span>
					</div> 
					<div class="no-move"></div>
				</div>
				<div class="box-content">
 
			    <table id="dynamic-table" class="table table-striped table-bordered ">
			        <thead>
			        <tr> 
			            <th>序号</th>
			            <th>活动名称</th> 
			            <th>活动类型</th> 
			            <th>办理人</th>
			            <th>活动开始时间</th>
			            <th>活动结束时间</th> 
			        </tr>
			        </thead>
			        <tbody>
			         	<tr v-for="(row,index) in rows"> 
				            <td class="center" > {{index + 1}} </td>
				            <td> {{row.activityName}}</td> 
				            <td> {{row.activityType}}</td> 
				            <td> {{row.assignee}}</td>
				            <td> {{row.startTime}}</td>
				            <td> {{row.endTime}}</td> 
			        	</tr>  
			        </tbody>
			    </table>
  				</div>
             </div>
         </div>
     </div> 
   </div>
</div>
<div th:include="include :: footer"></div>
<script src="/js/vue.min.js"></script>

<script th:inline="javascript">
	var instanceId = [[${instanceId}]];
    var app = new Vue({
        el: '#dynamic-table',
        data: { 
            rows: '' 
        },
        methods: {
            getData: function (taskId) {
                $.getJSON('/activiti/processinfoJson?instanceid='+taskId, {}, 
                		function (r) { 
		                    app.rows = r.data.records; 
		                });
            }
        },
        created: function () {
            this.getData(instanceId);
        }
    });
</script>

</body>
</html>